<template>
  <el-form :model="form" label-width="90px">
    <AvatarCropper v-model:diag="dialogVisible" @closeAvatarDialog="closeAvatarDialog"></AvatarCropper>

    <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" @click="dialogVisible=true" />

    <el-form-item label="姓名"  width="200px" prop="name">
      <el-input width="200px" v-model="form.name" disabled></el-input>
    </el-form-item>
    <el-form-item label="昵称"  width="200px" prop="name">
      <el-input width="200px" v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="性别"  width="200px" prop="sex">
      <el-radio-group v-model="form.sex" class="ml-4">
        <el-radio :value="1">男</el-radio>
        <el-radio :value="2">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="邮箱"  width="200px" prop="email">
      <el-input width="200px" v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="自我介绍" prop="desc">
      <el-input width="200px" type="textarea" v-model="form.desc" maxlength="300"  show-word-limit :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
    </el-form-item>
    <el-button type="warning"  style="margin-left: 30px" @click="UpdateUserInfo">更新</el-button>
  </el-form>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {useRoute} from "vue-router";

import AvatarCropper  from '@/components/common/PutImage.vue'
import axios from 'axios';
const dialogVisible = ref(false)
const route = useRoute()
const username = route.query.username

const sex = ref("1")
const form = reactive({
  sex:"1",
  name:username,
  email:"",
  desc:""
})

const UpdateUserInfo = () => {
  console.log(form)
}
// 关闭弹框所触发的事件
const closeAvatarDialog=(data)=> {
  dialogVisible.value = false
}

const imageSrc = ref(''); // 图片路径
const cropper = ref(null);

// 选择图片后处理裁剪
const handleCrop = () => {
  const canvas = cropper.value.getCroppedCanvas();
  imageSrc.value = canvas.toDataURL('image/png'); // 转换为DataURL
};

// 上传头像
const uploadAvatar = async () => {
  if (!imageSrc.value) {
    alert('请先裁剪图片');
    return;
  }

  try {
    const formData = new FormData();
    formData.append('avatar', imageSrc.value);

    const response = await axios.post('/api/upload-avatar', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });

    alert('上传成功');
    // 处理上传成功后的逻辑，例如更新用户信息等
  } catch (error) {
    alert('上传失败');
  }
};
</script>

<style scoped>
.el-input{
  width: 200px;
}

.el-textarea{
  width: 460px;
}
</style>